<template>
  <div class="tickinfo p-2">
    <el-card>
      <div class="ant-alert" style="margin-bottom: 16px;">
        温馨提示：如开票信息有变化，请及时编辑修改。
      </div>
      <div class="antformcon">
        <el-form ref="ruleFormRef" :model="form" label-width="auto" :rules="rules" style="max-width: 1000px;margin:0 auto">
          <el-form-item label="发票抬头" required prop="header" >
            <el-input v-model="form.header" placeholder="请输入发票抬头" :disabled="formBoolean || !!form.id"/>
          </el-form-item>
          <el-form-item label="纳税人识别号" required prop="nsrSbh">
            <el-input v-model="form.nsrSbh" placeholder="请输入纳税人识别号" :disabled="formBoolean"/>
          </el-form-item>
          <el-form-item label="单位注册地址" required prop="unitAddress">
            <el-input v-model="form.unitAddress" placeholder="请输入单位注册地址" :disabled="formBoolean"/>
          </el-form-item>
          <el-form-item label="单位电话" required prop="unitPhone">
            <el-input v-model="form.unitPhone" placeholder="请输入单位电话" :disabled="formBoolean"/>
          </el-form-item>
          <el-form-item label="开户银行" required prop="bankAddress">
            <el-input v-model="form.bankAddress" placeholder="请输入开户银行" :disabled="formBoolean"/>
          </el-form-item>
          <el-form-item label="开户银行账户" required prop="bankCard">
            <el-input v-model="form.bankCard" placeholder="请输入开户银行账户" :disabled="formBoolean"/>
          </el-form-item>
          <el-form-item label="收件地址" required prop="address">
            <el-input v-model="form.address" placeholder="请输入收件地址" :disabled="formBoolean"/>
          </el-form-item>
          <el-form-item label="收件人姓名" required prop="name">
            <el-input v-model="form.name" placeholder="请输入收件人姓名" :disabled="formBoolean"/>
          </el-form-item>
          <el-form-item label="收件人联系电话" required prop="phone">
            <el-input v-model="form.phone" placeholder="请输入收件人联系电话" :disabled="formBoolean"/>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email" placeholder="请输入邮箱" :disabled="formBoolean"/>
          </el-form-item>
        </el-form>
        <el-row justify="center" v-if="formBoolean">
          <el-button type="primary" @click="formBoolean = !formBoolean">修改</el-button>
        </el-row>
        <el-row justify="center" v-else>
          <el-button type="danger" plain @click="formBoolean = !formBoolean">取消</el-button>
          <el-button type="primary" :loading="subLoading" @click="submitForm(ruleFormRef)">确定</el-button>
        </el-row>

      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { invoiceAddress , invoiceAddressAdd , invoiceAddressAddEdit } from '@/api/invoice/TicketInfo/index'
  const ruleFormRef = ref<FormInstance>()
  const subLoading = ref(false);
  interface RuleForm{
    header:string,
    nsrSbh:string,
    unitAddress:string,
    unitPhone:string,
    bankCard:string,
    bankAddress:string,
    address:string,
    name:string,
    phone:string,
    email:string,
    [property: string]: any
  }
  const form = ref<RuleForm>({
    header:'',
    nsrSbh:'',
    unitAddress:'',
    unitPhone:'',
    bankCard:'',
    bankAddress:'',
    address:'',
    name:'',
    phone:'',
    email:'',
    id:null
  })
  const rules = reactive({
    header: [
      { required: true, message: '请输入发票抬头', trigger: 'blur' }
    ],
    nsrSbh: [
      { required: true, message: '请输入纳税人识别号', trigger: 'blur' }
    ],
    unitAddress: [
      { required: true, message: '请输入单位注册地址', trigger: 'blur' }
    ],
    unitPhone: [
      { required: true, message: '请输入单位电话', trigger: 'blur' }
    ],
    bankAddress: [
      { required: true, message: '请输入开户银行', trigger: 'blur' }
    ],
    bankCard: [
      { required: true, message: '请输入开户银行账户', trigger: 'blur' }
    ],
    address: [
      { required: true, message: '请输入收件地址', trigger: 'blur' }
    ],
    name: [
      { required: true, message: '请输入收件人姓名', trigger: 'blur' }
    ],
    phone: [
      { required: true, message: '请输入收件人联系电话', trigger: 'blur' },
     {
        pattern: /^1[3-9]\d{9}$/,
        message: '手机号格式不正确',
        trigger: 'blur',
      },
    ]
  })

  // 获取信息
  const pageSize = ref(10)
  const pageNum = ref(1)
  const wayinvoiceAddress = async ()=>{
    const res = await invoiceAddress({
      pageSize:pageSize.value,
      pageNum:pageNum.value
    })
    if(res.total > 0) form.value = res.rows[0]
  }
  // 输入框的禁止和启用
  const formBoolean = ref(true)
  // 提交用户信息
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        if(!form.value.id){
          wayinvoiceAddressAdd()
        }else{
          wayinvoiceAddressAddEdit()
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  // 提交新增
  const wayinvoiceAddressAdd = async ()=>{

    subLoading.value = true;
    const res = await invoiceAddressAdd(form.value)
    ElMessage.success(res.msg)
    formBoolean.value = !formBoolean.value
    subLoading.value = false;
    wayinvoiceAddress();
  }
  // 修改
  const wayinvoiceAddressAddEdit = async ()=>{
    subLoading.value = true;
    const res = await invoiceAddressAddEdit(form.value)
    formBoolean.value = !formBoolean.value
    ElMessage.success(res.msg)
    subLoading.value = false;
    wayinvoiceAddress();
  }
  onMounted(()=>{
    wayinvoiceAddress()
  })
</script>

<style lang="scss" scoped>
  .tickinfo{
    width:100%;
    background-color: #eef0f3;
    .ant-alert{
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
      color: rgba(0, 0, 0, .65);
      font-size: 14px;
      padding: 8px 15px 8px 37px;
    }
    .antformcon{

    }
    .el-row {
    }
  }
</style>
